import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Input, InputNumber, Modal, Row, Select} from 'antd';

const FormItem = Form.Item;
const R = require("ramda");
const supplierProfitDetail = Form.create()(class SupplierProfitDetail extends React.Component{
        constructor(props){
		    super(props);
		    this.state = { 
                open: false, 
                disabled: false,
                supplierId: null,
            }
	    }

        handleOpen = (disabled) => {
            this.setState({ open: true, disabled });
        }
    
        handleCancel = () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleSetFeeItemList = (value) => {
            this.props.dispatch({
                type: 'supplierProfit/getListBySupplierId',
                payload: {
                    supplierId : value,
                }
            })
        }

        handleConfirm = () =>{
            this.props.form.validateFields({ force: true },(errors, values) => {
                if (errors) return; 
                    values.id = this.props.supplierProfit.dataSource && this.props.supplierProfit.dataSource.id ? this.props.supplierProfit.dataSource.id : null;
                    if(!R.equals(R.pick(Object.keys(values),this.props.supplierProfit.dataSource),values)){
                        this.props.dispatch({
                            type: R.isNil(values.id) ? 'supplierProfit/addSupplierProfit' : 'supplierProfit/updateSupplierProfit',
                                payload:{
                                    ...values,
                                    onSuccess:() =>{
                                        this.handleCancel();
                                        if(this.props.refreshList) this.props.refreshList();
                                    }
                                }
                            })
                        }else this.handleCancel();
                    });
        }

    render(){
        let dataSource = this.props.supplierProfit.dataSource ? this.props.supplierProfit.dataSource : {};
        let supplierList = this.props.supplier.supplierList ? this.props.supplier.supplierList : [];
        let feeItemList = this.props.supplierProfit.feeItemList ? this.props.supplierProfit.feeItemList : {};

        let formItemLayout = { labelCol:{ span: 8}, wrapperCol:{ span:14}};
        const { getFieldDecorator } = this.props.form;
        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        return(
            <Modal maskClosable={false} visible={this.state.open} width={850} title={"利润详情"} confirmLoading={this.props.loading} onCancel={ this.handleCancel.bind(this)} footer={footer}>
                <Form>
                    <Row>
                        <Col span={12}>
						    <FormItem {...formItemLayout} label="供应商代码" hasFeedback>
							    {getFieldDecorator('supplierId', {
								    rules: [{
									    required: true, message: '请选择供应商代码'
								    }],
								    initialValue: (R.isNil(dataSource.supplierId) || R.isEmpty(dataSource.supplierId)) ?
                                        undefined : dataSource.supplierId + ""
						    	})(
								    <Select style={{ width: '100%' }} disabled={this.state.disabled} showSearch placeholder="可通过输入关键字搜索"
                                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                            onChange={this.handleSetFeeItemList.bind(this)}>
									    {
										    !R.isNil(supplierList) ? supplierList.map(item => {
										    	return (<Select.Option value={item.id + ""} key={item.id + ""}>{item.supplierCode}</Select.Option>);
										    }) : ''
									    }
                                    </Select>
								    )}
						    </FormItem>
					    </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="费用项目代码" hasFeedback>
                                {getFieldDecorator('feeItemId', {
                                    rules: [{
                                        required: true, message: '请选择费用项目代码'
                                    }],
                                    initialValue: (R.isNil(dataSource.feeItemId) || R.isEmpty(dataSource.feeItemId)) ?
                                        undefined : dataSource.feeItemId + ""
                                })(
                                    <Select style={{ width: '100%' }} disabled={this.state.disabled} showSearch placeholder="可通过输入关键字搜索"
                                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                            >
                                        {
                                            !R.isNil(feeItemList) ? feeItemList.map(item => {
                                                return (<Select.Option value={item.id + ""} key={item.id + ""}>{item.feeCode}</Select.Option>);
                                            }) : ''
                                        }
                                    </Select>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="利润" hasFeedback>
                                {getFieldDecorator('profit', {
                                    rules: [{
                                        required: true, message: '请输入利润',
                                    }],
                                    initialValue: dataSource.profit
                                })(
                                    <InputNumber max={99999999999} disabled={this.state.disabled} style={{width: '100%'}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="币种" hasFeedback>
                                {getFieldDecorator('currency', {
                                    rules: [{
                                        required: true, message: '请输入币种',
                                    }],
                                    initialValue: dataSource.currency
                                })(
                                    <Input  maxLength="50"  disabled={this.state.disabled}/>
                                )}
                            </FormItem>
                        </Col>
                    </Row>

                </Form>
            </Modal>
            )
        }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.supplierProfit, supplierProfit: state.supplierProfit, supplier: state.supplier
    };
}

export default connect(mapStateToProps)(supplierProfitDetail);